<template>
	<view :style="{ paddingTop: systemInfo.statusBarHeight + systemInfo.titleBarHeight + 'px' }">
		<title-bar :back="true" title="为逝者绑定纪念馆"></title-bar>
		<view class="page-content common-page-content" :style="{ minHeight: systemInfo.minHeight }">
			<view class="tip-layout">当前正在为【{{ name }}】绑定纪念馆</view>
			<view class="hall-item" v-for="(item, index) in dataList" :key="item.id" @click="checkClick(item.id)">
				<view class="number" v-if="item.deceaseds.length > 1">双人馆</view>
				<view class="image-layout">
					<image v-if="item.deceaseds[0].photoUrl" :src="imageUrl + item.deceaseds[0].photoUrl" class="image1"></image>
					<image v-else src="@/static/image/common/head_default.png" class="image1"></image>
					<image v-if="item.deceaseds.length > 1 && item.deceaseds[1].photoUrl" :src="imageUrl + item.deceaseds[1].photoUrl" class="image2"></image>
					<image v-else-if="item.deceaseds.length > 1" src="@/static/image/common/head_default.png" class="image2"></image>
					<image mode="aspectFit" class="item-bg"></image>
				</view>
				<view class="info-layout">
					<view class="flex-align-center">
						<text class="name-text">{{ item.name }}</text>
						<view class="type" v-if="item.type === 1">名人</view>
					</view>
					<view class="date-text">{{ dateFormat(item.deceaseds[0]) }}</view>
					<view v-if="item.deceaseds.length > 1" class="date-text">{{ dateFormat(item.deceaseds[1]) }}</view>
				</view>
				<view class="check-box"><radio color="#56BF84" :checked="detail.hallId == item.id"></radio></view>
			</view>
			<view class="common-margin-top" v-if="loaded">
				<common-button v-if="dataList.length > 0" @click="submit()" title="确认绑定"></common-button>
				<common-button v-else @click="toCreateHall()" title="去创建纪念馆"></common-button>
			</view>
			<empty-layout v-if="loadingType === 'empty'" :option="{ tip: '当前无可绑定的纪念馆，请先前往创建~' }"></empty-layout>
			<uni-load-more v-if="dataList.length > pageSize" :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
import mixin from '../mixins/ancestral-hall.js';
import emptyLayout from '@/components/empty-layout/empty-layout.vue';

export default {
	mixins: [mixin],
	components: {
		emptyLayout
	},
	data() {
		return {
			id: undefined,
			name: undefined,
			ancestralHallId: undefined,
			loadingType: 'more',
			pageNum: 1,
			pageSize: 10,
			dataList: [],
			detail: {},
			loaded: false
		};
	},
	methods: {
		/* 加载家族成员详情 */
		loadDetail() {
			this.$http.get('/ancestral-hall/member/' + this.id).then(res => {
				if (res.code === 200) {
					this.detail = res.data;
				}
			});
		},
		/* 加载可绑定的纪念馆 */
		loadData() {
			let param = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				orderByColumn: 'create_time',
				isAsc: 'desc'
			};
			this.$http.get('/hall/bind-list/' + this.ancestralHallId, { params: param }).then(res => {
				if (res.code === 200) {
					if (this.pageNum == 1) {
						this.dataList = [];
					}
					this.dataList = this.dataList.concat(res.rows);
					if (this.dataList.length === 0) {
						this.loadingType = 'empty';
					} else if (this.dataList.length === Number(res.total)) {
						this.loadingType = 'nomore';
					} else {
						this.loadingType = 'more';
					}
				}
				this.loaded = true;
			});
		},
		/* 选择监听 */
		checkClick(id) {
			this.$set(this.detail, 'hallId', id);
		},
		/* 确认绑定 */
		submit() {
			if (!this.detail.hallId) {
				uni.showToast({
					icon: 'none',
					title: '请选择要绑定的纪念馆'
				});
				return;
			}
			this.$debounce.debounce({
				key: 'submit',
				time: 3000,
				success: () => {
					this.$http.put('/ancestral-hall/member', this.detail).then(res => {
						if (res.code === 200) {
							uni.showToast({
								icon: 'none',
								title: '绑定成功'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						}
					});
				}
			});
		},
		/* 跳转我的纪念馆页面 */
		toCreateHall() {
			uni.navigateTo({
				url: '/memorial/pages/memorial-hall-list'
			});
		}
	},
	onPullDownRefresh() {
		this.pageNum = 1;
		this.loadingType = 'more';
		this.loadData();
	},
	onReachBottom() {
		if (this.loadingType === 'more') {
			this.pageNum++;
			this.loadingType = 'loading';
			this.loadData();
		}
	},
	onLoad(data) {
		this.id = data.id;
		this.name = data.name;
		this.ancestralHallId = data.ancestralHallId;
		this.loadDetail();
		this.loadData();
	}
};
</script>

<style lang="scss" scoped>
@import './bind-memorial-hall.scss';
</style>
